<!-- 绿色通道 - 患者列表 - 医疗记录 - 知情同意 界面 -->
<template>
  <div id="box">
    <el-row>
      <el-col style="margin-bottom: 0;" :offset="22" :span="1">
        <el-button type="primary" @click="dialogImgVisible = true">新增</el-button>
      </el-col>
    </el-row>
    <el-row style="width: 98%;margin:10px auto; padding: 20px 20px; background-color: #f2f2f2;"
      v-for="(item, index) in tableData" :key="index">
      <el-col :span="18">
        <div>{{ item.type }}</div>
      </el-col>
      <el-col :span="6">
        <span>{{ item.createAt }}</span>
        <span class="text">{{ checkrowdata.doctorName }}</span>
        <span class="text">{{ item.departmentName }}</span>
        <span class="text">{{ checkrowdata.patientName }}</span>
      </el-col>
      <el-col :span="6">
        <div style="margin-bottom: 10px;">开始谈话时间：</div>
        <el-input v-model="item.talktime" style="width: 80%;" size="small" :disabled="true" />
      </el-col>
      <el-col :span="6">
        <div>录音播放：</div>
        <audio v-if="item.recordurl" style="outline: none;" :src="item.recordurl" controls="controls">
          您的浏览器不支持 音频播放
        </audio>
        <div v-else style="margin-top: 10px;margin-left: 30px;">
          未录音
        </div>
      </el-col>
      <el-col :span="6">
        <div style="margin-bottom: 10px;">签署知情同意时间：</div>
        <el-input v-model="item.consenttime" style="width: 80%;" size="small" :disabled="true" />
      </el-col>
      <el-col :span="24">
        <div style="margin-bottom: 10px;">上传的图片：</div>
        <el-col :offset="1" :span="3" v-for="(agreeUrl, sub) in item.agreepicUrl" :key="sub">
          <el-image style="width: 60%;" :preview-src-list="item.agreepicUrl" @click.stop="handleClick"
            :src="agreeUrl"></el-image>
        </el-col>
      </el-col>
      <el-col :span="20">
        <span>备 注 ：</span>
        <el-input style="width: 80%;" size="small" v-model="item.notes" disabled>
        </el-input>
      </el-col>
    </el-row>
    <el-dialog title="新增知情同意" :visible.sync="dialogImgVisible" width="60%" top="50px" :before-close="handleClose">
      <el-form ref="classAdata" :model="classAdata" :rules="classARules" label-width="160px"
        style="width: 100%;height: 620px;overflow: auto">
        <el-col style="margin-bottom: 0;" v-if="diseaseType === '胸痛'" :span="10">
          <el-form-item label="知情同意类型 :" prop="type">
            <el-select v-model="classAdata.type" filterable>
              <el-option v-for="item in typeList" :key="item.label" :value="item.value" :label="item.label" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col style="margin-bottom: 0;" v-else :span="10">
          <el-form-item label="知情同意类型 :" prop="type">
            <el-select v-model="classAdata.type" filterable>
              <el-option v-for="item in typeStrokeList" :key="item.label" :value="item.value" :label="item.label" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="2" :offset="6">
          <el-button size="small" type="primary" @click="Addindicators('classAdata')">添加</el-button>
        </el-col>
        <el-col :span="24">
          <el-divider />
        </el-col>
        <el-col :span="24">
          <p v-for="(item, key) in classAdata.tableDete" style="margin-left: 30px;font-size: 15px;margin-top: -10px">
            <el-col style="margin-bottom: 0;" v-if="diseaseType === '胸痛'" :span="24">
              <el-form-item label="知情同意类型 :">
                <el-select v-model="item.type" disabled size="small" filterable>
                  <el-option v-for="item in typeList" :key="item.label" :value="item.value" :label="item.label" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col style="margin-bottom: 0;" v-else :span="24">
              <el-form-item label="知情同意类型 :">
                <el-select v-model="item.type" disabled size="small" filterable>
                  <el-option v-for="item in typeStrokeList" :key="item.label" :value="item.value" :label="item.label" />
                </el-select>
              </el-form-item>
            </el-col>
            <!-- <div>{{item.type}}</div> -->
            <el-col style="margin-bottom: 0;" :span="10">
              <el-form-item label="开始谈话时间 :" prop="talktime">
                <el-date-picker v-model="item.talktime" type="datetime" style="width: 70%;"
                  value-format="yyyy-MM-dd HH:mm:ss" size="small" placeholder="选择日期时间" />
              </el-form-item>
            </el-col>
            <el-col style="margin-bottom: 0;" :span="10">
              <el-form-item label="签署知情同意时间 :" prop="consenttime">
                <el-date-picker v-model="item.consenttime" type="datetime" style="width: 70%;"
                  value-format="yyyy-MM-dd HH:mm:ss" size="small" placeholder="选择日期时间" />
              </el-form-item>
            </el-col>
            <el-col style="margin-bottom: 0;" :span="23">
              <el-form-item label="上传图片 :" ref="uploadElement" prop="imageUrl">
                <el-input v-model="item.imageUrl" v-if="false"></el-input>
                <el-upload action="" ref="upload" list-type="picture-card" :auto-upload="false" :limit="3"
                  :data="classAdata" :file-list="item.fileList" :on-exceed="handleExceed"
                  :on-change="(file, fileList) => { handleChange(file, fileList, key) }"
                  :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
                  <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                  <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
              </el-form-item>
            </el-col>
            <el-col :span="23">
              <el-form-item label="备注 :" prop="notes">
                <el-input style="width: 80%;" size="small" v-model="item.notes">
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-divider />
            </el-col>
          </p>
        </el-col>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm('classAdata')">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { selectInformedConsent, saveInformedConsent } from '@/api/green-channel/tab-request'
import print from 'print-js'
export default {
  // 由主页面(父组件) 接收来的, 选择项的数据
  props: ['checkrowdata'], // 由主页面(父组件) 接收来的, 选择项的数据
  data() {
    return {
      diseaseType: '胸痛',
      tableData: [],
      dialogImgVisible: false,
      typeList: [{ value: '', label: '请选择类型' }, { value: '1', label: '介入治疗知情同意' }, { value: '2', label: '溶栓治疗知情同意' },
      { value: '3', label: '保守治疗知情同意' }, { value: '4', label: '放弃治疗知情同意' },
      { value: '5', label: '转院治疗知情同意' }, { value: '6', label: '出院治疗知情同意' }],
      typeStrokeList: [{ value: '', label: '请选择类型' }, { value: '1', label: '介入治疗知情同意' }, { value: '2', label: '溶栓治疗知情同意' },
      { value: '3', label: '保守治疗知情同意' }, { value: '4', label: '放弃治疗知情同意' },
      { value: '5', label: '转院治疗知情同意' }, { value: '6', label: '出院治疗知情同意' },
      { value: '7', label: '脑出血治疗知情同意' }, { value: '8', label: 'AVM治疗知情同意' },
      { value: '9', label: '烟雾病治疗知情同意' }, { value: '10', label: '介入栓塞治疗知情同意' }, { value: '11', label: '夹闭治疗知情同意' }],
      /* 弹窗 */
      classARules: {
        type: [
          { required: true, message: '请选择知情同意类型', trigger: 'blur' }
        ]
      },
      classAdata: {
        type: '',
        tableDete: []
      },
      /* 上传照片 */
      dialogImageUrl: '',
      dialogVisible: false

    }
  },
  computed: {
  },
  mounted() {
    this.queryTable()
  },
  methods: {
    handleClick() {
      let _this = this
      this.$nextTick(() => {
        let div = document.getElementsByClassName('el-image-viewer__actions__inner')
        let printDiv = document.getElementsByClassName('el-image-viewer__img')
        console.log(printDiv, 'printDiv')
        printDiv[0].id = 'printArea'
        let i = document.createElement('i')
        let printI = document.createElement('i')
        i.className = 'close-icon el-icon-close'
        printI.className = 'close-icon el-icon-printer'
        document.querySelector('.el-image-viewer__close').style.display = 'none'
        div[0].appendChild(i)
        div[0].appendChild(printI)
        i.addEventListener('click', () => {
          document.querySelector('.el-image-viewer__close').click()
        })
        printI.addEventListener('click', () => {
          console.log(print, 'print')
          console.log(document.getElementsByClassName('el-image-viewer__img')[0].currentSrc)
          let imgUrl = document.getElementsByClassName('el-image-viewer__img')[0].currentSrc
          // let style = '@page { margin: 0 10mm }' + '@media print {' + '.print-div{ padding: 0px }' + ''
          print({
            printable: imgUrl,
            type: 'image',
            imageStyle: 'height:50%;width: 100%;margin-bottom:20px;'
          })
        })
      })
    },
    /* 获取 -历史数据 */
    queryTable() {
      this.diseaseType = this.checkrowdata.diseaseType
      if (this.diseaseType === '胸痛') {
        selectInformedConsent(this.checkrowdata.dispatchId).then(res => {
          this.tableData = res.data
          this.tableData.forEach((item, index) => {
            item.agreepicUrl = item.agreepicUrl.split(',')
            this.typeList.forEach((term) => {
              if (item.type === term.value) {
                item.type = term.label
              }
            })
          })
        })
      } else if (this.diseaseType === '卒中') {
        selectInformedConsent(this.checkrowdata.dispatchId).then(res => {
          this.tableData = res.data
          this.tableData.forEach((item, index) => {
            item.agreepicUrl = item.agreepicUrl.split(',')
            this.typeStrokeList.forEach((term) => {
              if (item.type === term.value) {
                item.type = term.label
              }
            })
          })
        })
      }
    },

    /* 关闭弹窗 */
    handleClose(done) {
      this.classAdata = {
        type: '',
        tableDete: [],
      }
      done()
    },
    /*  关闭弹窗 -- 取消  */
    cancel() {
      this.classAdata = {
        type: '',
        tableDete: [],
      }
      this.dialogImgVisible = false
    },
    /* 添加 */
    Addindicators(formname) {
      if (formname === 'classAdata') {
        this.$refs[formname].validate((valid) => {
          if (valid) {
            let identification = true
            let oldType = this.classAdata.type
            if (this.diseaseType === '胸痛') {
              this.typeList.forEach((term) => {
                if (this.classAdata.type === term.value) {
                  this.classAdata.type = term.label
                }
              })
            } else {
              this.typeStrokeList.forEach((term) => {
                if (this.classAdata.type === term.value) {
                  this.classAdata.type = term.label
                }
              })
            }
            if (this.tableData.length !== 0) {
              this.tableData.forEach((item, index) => {
                if (this.classAdata.type === item.type || this.classAdata.type === oldType) {
                  identification = false
                }
              })
            } else {
              if (this.classAdata.type === oldType) {
                identification = false
              }
            }
            this.classAdata.tableDete.forEach((table) => {
              if (table.type === this.classAdata.type) {
                identification = false
              }
            })
            const obj = {
              talktime: '',
              consenttime: '',
              notes: '',
              fileList: []
            }
            if (identification) {
              obj.type = this.classAdata.type
              this.classAdata.tableDete.push(obj)
              // this.classAdata.type = ''
            } else {
              this.$message({
                message: '知情同意类型已存在!',
                type: 'error',
                customClass: 'zZindex'
              })
            }
          } else {
            this.$message({
              message: '请选择知情同意类型!',
              type: 'error',
              customClass: 'zZindex'
            })
          }
        })
      }
    },

    /* upload -  上传失败/上传成功 / 上传change / */
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleExceed(files, fileList) {
      this.$message.warning(`最多可上传十张照片`);
    },
    handleChange(file, fileList, key) {
      // 获取上传图片的列表
      this.classAdata.tableDete[key].fileList = fileList;
    },

    /* 提交表单 */
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let data = this.classAdata.tableDete
          let rules = true
          if (!data.length) {
            this.$message.warning('请添加知情同意!')
            rules = false
          }
          for (let i = 0; i < data.length; i++) {
            if (data[i].talktime === '') {
              this.$message({
                type: 'warning',
                message: '请填写谈话时间!'
              })
              rules = false
              break
            } else if (data[i].consenttime === '') {
              this.$message({
                type: 'warning',
                message: '请填写签署知情同意时间!'
              })
              rules = false
              break
            }
            if (data[i].talktime && data[i].consenttime) {
              if (new Date(data[i].talktime).getTime() >= new Date(data[i].consenttime).getTime()) {
                this.$message({
                  type: 'warning',
                  message: '签署知情同意时间必须大于开始谈话时间!'
                })
                return
              }
            }
          }

          if (!rules) {
            return false
          }
          if (this.diseaseType === '胸痛') {
            this.typeList.forEach((term) => {
              this.classAdata.tableDete.forEach((item) => {
                if (item.type === term.label) {
                  item.type = term.value
                }
              })
            })
          } else {
            this.typeStrokeList.forEach((term) => {
              this.classAdata.tableDete.forEach((item) => {
                if (item.type === term.label) {
                  item.type = term.value
                }
              })
            })
          }
          let formData = new FormData()
          formData.append('medicalId', this.checkrowdata.medicalId)
          formData.append('dispatchId', this.checkrowdata.dispatchId)
          formData.append('userId', this.checkrowdata.userId)
          formData.append('isWeb', 1)
          this.classAdata.tableDete.forEach((itemData, key) => {
            formData.append('type' + itemData.type, itemData.type)
            formData.append('consenttime' + itemData.type, itemData.consenttime)
            formData.append('talktime' + itemData.type, itemData.talktime)
            formData.append('notes' + itemData.type, itemData.notes)
            /* 上传的图片需要是 agreeImg1_1 : 第一张图 */
            itemData.fileList.forEach((item, index) => {
              formData.append("agreeImg" + itemData.type + "_" + (index + 1), item.raw)
            })
          })
          saveInformedConsent(formData).then((res) => {
            if (res.code === 0) {
              this.classAdata = {
                type: '',
                tableDete: []
              }
              this.dialogImgVisible = false
              this.$message.success('保存成功')
              this.queryTable()
            } else {
              this.classAdata = {
                type: '',
                tableDete: []
              }
              this.dialogImgVisible = false
              this.$message.error('保存失败')
            }
          }).catch((err) => {
            console.log(err)
          })
        } else {
          return false;
        }
      })
    },
  }
}
</script>

<style scoped>
#box {
  height: calc(100vh - 190px);
}

.text {
  margin-left: 15px;
}

.el-col {
  margin-bottom: 15px;
}

.block {
  width: 30%;
  height: 30%;
}

.close-icon {
  color: red;
  font-size: 23px;
}
</style>
